<template>
  <div>
    <el-table
      :data="brandList"
      style="width: 100%;font-size:12px"
    >
      <el-table-column
        label="品牌名"
        prop="brand_name"
      />
      <el-table-column
        label="授权代码前序"
        prop="brand_first_code_num"
      />
      <el-table-column
        label="授权书模板"
      >
        <template slot-scope="scope">
          <el-image
            style="width:50px;"
            :src="scope.row.approval_img"
            :preview-src-list="[scope.row.approval_img]"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="授权期限"
        prop="brand_yes_time"
      />
      <el-table-column label="代理等级">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="checkLevel(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="resetFun(scope.row)">修改</el-button>
          <del-confirm :title="'是否确认删除名称为 “' + scope.row.brand_name + '” 的品牌？'" button-text="删除" @onConfirm="delInfo(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <brand-dialog ref="resetBrand" :operation-type="operationType" @reloadFun="reloadFun" />
    <level-dialog ref="level" />
  </div>
</template>

<script>
import delConfirm from '@/components/DelConfirm'
import brandDialog from './brand-dialog'
import levelDialog from './brand-level-dialog'
import { operationBrand, getBrandsLevels } from '@/api/brand'
import { deletePicture } from '@/api/main'
export default {
  components: {
    delConfirm,
    brandDialog,
    levelDialog
  },
  props: {
    brandList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      visible: false,
      operationType: '2',
      levelList: []
    }
  },
  methods: {
    delInfo(row) {
      console.log(row)
      const data = {
        type: 3,
        id: row.id
      }
      let imgName = row.approval_img.split('/')
      imgName = imgName[imgName.length - 1]
      // console.log('imgName', imgName)
      operationBrand(data).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.$message.success('品牌删除成功！')
          this.$emit('reloadFun')
          deletePicture({ object: imgName }).then(res => {
            if (res.code === 200) {
              // console.log('img del')
            }
          })
        }
      })
    },
    resetFun(row) {
      this.$refs.resetBrand.dialogFormVisible = true
      this.$refs.resetBrand.form = JSON.parse(JSON.stringify(row))
    },
    reloadFun() {
      this.$emit('reloadFun')
    },
    checkLevel(row) {
      console.log(row.id)
      this.getBrandLevels(row.id)
      const that = this
      setTimeout(function() {
        that.$refs.level.tableData = that.levelList
        that.$refs.level.dialogTableVisible = true
      }, 100)
    },
    getBrandLevels(id) {
      const data = {
        brand_id: id
      }
      getBrandsLevels(data).then(res => {
        console.log(res)
        if (res.list.length !== 0) {
          this.levelList = res.list
        } else {
          this.levelList = []
        }
      })
    }
  }
}
</script>

<style>
  .el-image-viewer__close {
    color: #fff !important;
  }
  .el-image-viewer__img {
    width: 400px;
  }
</style>
